<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>setInterval</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: yellowgreen;
            position: absolute;
        }
    </style>
</head>
<body>
    <div></div>
</body>
<script>
    function interval(delay=1000,callback){
        return new Promise(resolve => {
            let id = setInterval(() => {
                callback(id,resolve);
            },delay);
        });
    }
    interval(100,(id,resolve) => {
        const div = document.querySelector("div");
        let left = parseInt(window.getComputedStyle(div).left);
        div.style.left = left + 10 + 'px';
        if(left >= 200){
            clearInterval(id);
            resolve(div);
        }
    }).then(div => {
        return interval(50,(id,resolve) => {
            let width = parseInt(window.getComputedStyle(div).width);
            div.style.width = width -10 + 'px';
            if(width <= 20){
                clearInterval(id);
                 resolve(div);
            }
        });
    }).then(div => {
        div.style.backgroundColor = 'red';
    });
</script>
</html>